<script lang="ts" setup>
import { ref } from 'vue';

defineProps<{ items: any[] }>();

const current = ref(0);

const handleChange = (e: any) => {
	current.value = e.detail.current;
};
</script>

<template>
	<view class="um-swiper">
		<uni-swiper-dot :current="current" :info="items" mode="round" v-if="items && items.length > 0">
			<swiper class="swiper" @change="handleChange">
				<swiper-item :key="key" v-for="(item, key) in items">
					<um-image :src="item.url" height="100%" width="100%" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="placeholder" v-else>
			<um-image height="100%" width="100%" style="width: 100%; height: 100%" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
.swiper,
.placeholder {
	height: 400rpx;
}
</style>
